<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框建议查询</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/page.css"/>
    <link rel="stylesheet" href="../css/currency.css">
    <link rel="stylesheet" href="../css/optgroups.css">
    <link rel="stylesheet" href="../css/music.css">
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">

</head>
<body>

<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
    <el-row class="demo-autocomplete">
        <el-col :span="12">
            <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入农历日期"
                    title="示例：二〇二〇年一月十三卯时"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
    </el-row>
</div>

</body>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/mhys.js"></script>
<script src="../js/music.js"></script>
<script src="//unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>

<script>

    var Main = {
        data() {
            return {
                restaurants: [],
                state1: ''
            };
        },
        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;

                let programList = [];
                for (let i = 0; i < this.restaurants.length; i++) {
                    programList.push({'value': restaurants[i].code + ' ' + '-' + ' ' + restaurants[i].name})
                }

                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            loadAll() {
                return [
                    {"value": "二〇二〇年一月十三卯时"}
                ];
            }
        },

        mounted() {
            this.restaurants = this.loadAll();
        }

    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>


</html>